<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>照片墙</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        div{
            width:1200px;
            margin:50px auto;
            position:relative;
            background:red;
        }
        img{
            padding:10px;
            border:1px solid #ccc;
            background:#fff;
            position:absolute;
        }

        div img:first-of-type{
            width:400px;
            left:300px;
            top:260px;
            transform:rotate(-15deg);
        }
        div img:nth-of-type(2){
            width:300px;
            left:690px;
            top:200px;
            transform:rotate(-20deg);

        }
        div img:nth-of-type(3){
            width:300px;
            left:610px;
            top:100px;
            transform:rotate(20deg);

        }
        div img:nth-of-type(4){
            width:240px;
            left:380px;
            top:50px;
            transform:rotate(-18deg);

        }
        div img:nth-of-type(5){
            width:300px;
            left:860px;
            top:300px;
            transform:rotate(25deg);

        }
        div img:nth-of-type(6){
            width:300px;
            left:40px;
            top:60px;
            transform:rotate(-25deg);

        }
        div img:nth-of-type(7){
            width:300px;
            left:40px;
            top:280px;
            transform:rotate(18deg);

        }
        div img:nth-of-type(8){
            width:260px;
            left:260px;
            top:100px;
            transform:rotate(23deg);

        }
        div img:nth-of-type(9){
            width:400px;
            left:550px;
            top:430px;
            transform:rotate(25deg);

        }
        div img:nth-of-type(10){
            width:270px;
            left:310px;
            top:220px;
            transform:rotate(-6deg);
        }
        div img:hover{
            z-index:1;
            transform:rotate(0deg) scale(1.5,1.5);
            transition:all 0.6s ease-in-out;

        }
    </style>
</head>
<body>
<div>
    <img src="images/1.jpg"/>
    <img src="images/2.jpg"/>
    <img src="images/3.jpg"/>
    <img src="images/4.jpg"/>
    <img src="images/5.jpg"/>
    <img src="images/7.jpg"/>
    <img src="images/6.jpg"/>
    <img src="images/8.jpg"/>
    <img src="images/9.jpg"/>
    <img src="images/10.jpg"/>
</div>
</body>
